<template>
	<view class="container">
		<com-head textTit="确认支付" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<!-- 预约信息 -->
		<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>预约信息</view>
		<view class="groupList">
			<view class="list">
				<text class="tit">预约门店</text>
				<text>{{makeStoreInfo.title}}</text>
			</view>
			<view class="list">
				<text class="tit">预约人数</text>
				<text>{{makeNum}}人</text>
			</view>
			<view class="list" v-if="makeTime">
				<text class="tit">预约时间</text>
				<text>{{makeDays}} {{makeTime}}</text>
			</view>
			
		</view>
		
		<!-- 项目选择 -->
		<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>项目选择</view>
		<view class="plsData">
			<!-- <view class="list" v-for="(ele,index) in projectList" :key="index">
				<text class="tit">{{ele.name}}（{{ele.duration}}）</text>
				<text>¥{{ele.price}}</text>
			</view> -->
			
			<view class="goods-box">
				<view class="goods" v-for="(ele,index) in projectList" :key="index">
					<image :src="ele.pic || ''" mode="aspectFill"></image>
					<view>
						<view class="t1">
							{{ele.name}}
						</view>
						<view class="tt">
							<view v-for="row in ele.tags">{{row.tags.name}}</view>
						</view>
						<view class="t2">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>
							{{ele.duration}}分钟
						</view>
						<view class="t2" v-if="ele.use_num">
							可用{{ele.use_num}}次
						</view>
						<view class="cuoClose"><u-icon name="close" color="#999999" size="20"></u-icon>1</view>
						<view class="price">
							<text v-if="is_single != 1"><text class="text">¥</text>{{ele.price}}</text>
							<text v-else><text class="text">¥</text>{{ele.single_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 指定技师 -->
		<view class="plsTitle" v-if="makeTech.length"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>指定技师</view>
		<view class="groupList bottom" v-if="makeTech.length">
			<view class="list" v-for="(ele,index) in makeTech" :key="index">
				<text class="tit">指定技师</text>
				<text>{{ele.name}}（{{ele.number}}）</text>
			</view>
		</view>
		
		<!-- 联系人 -->
		<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>联系人</view>
		<view class="groupList bottom">
			<view class="list">
				<text class="tit">联系人</text>
				<text>{{makeName}}</text>
			</view>
			<view class="list">
				<text class="tit">手机号</text>
				<text>{{makePhone}}</text>
			</view>
		</view>
		
		
		<view class="confrim" @click="submit()">确认支付</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				projectList:[],
				scrollTop: 0,
				isRec: ""
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({order_num, isRec}) {
			this.isRec = isRec
			if(order_num){
				this.order_num = order_num
			}
			// 获取预约项目
			if(this.chioseProjects.length){
				this.projectList = [...this.chioseProjects,...this.makeProject]
			}else{
				this.projectList = [...this.makeProject]
			}
			console.log(this.projectList,"dddd")
		},
		methods: {
			// 确认预约
		    async submit(){
				let tech = []
				let project_ids = []
				this.makeTech.forEach((ele)=>{
					tech.push(ele.staff_id)
				})
				this.projectList.forEach((ele)=>{
					project_ids.push(ele.id)
				})
				let params = {
					project_ids:project_ids.join(","),
					tech:tech.join(","),
					remark:this.remarks,
					store_id:JSON.stringify(this.makeStore_id),
					name:this.makeName,
					mobile:this.makePhone,
					date:this.makeDays,
					time:this.makeTime,
					number:this.makeNum,
					order_num:this.order_num ? this.order_num : ''
				}
				console.log(params,"params")
				// let {data,code} = await this.$u.api.confirmReserve(params);
				// if(code){
					// this.utlis.goUrl(`/pages/mine/submitSuccess?type=5`)
					let utl = `/pages/shop/projectOrder?peoject_id=${project_ids.join(",")}`
					if(this.isRec){
						utl += `&hiddCar=1`
					}
					this.utlis.goUrl(utl)
					// this.$u.vuex("remarks","")
					// this.$u.vuex("makeName","")
					// this.$u.vuex("makePhone","")
					// this.$u.vuex("makeDays","")
					// this.$u.vuex("makeTime","")
					// this.$u.vuex("makeNum","")
					// this.$u.vuex("chioseProjects",[])
					// this.$u.vuex("makeProject",[])
					// this.$u.vuex("makeTech",[])
				// }
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.title{
		padding: 30rpx  0 44rpx 32rpx;
		color: #666666;
		font-size: 26rpx;
	}
	.bottom{
		margin-bottom: 30rpx;
	}
	.confrim{
		width: 686rpx;
		line-height: 96rpx;
		text-align: center;
		background: linear-gradient(140deg,#50DCC2 0%, #007664);
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		margin: 60rpx 0;
	}
	.plsTitle{
		font-size: 28rpx;
		color: #242833;
		line-height: 26rpx;
		margin-bottom: 32rpx;
		margin-top: 32rpx;
		font-weight: bold;
		image{
			width: 9rpx;
			height: 29rpx;
			position: relative;
			top: 5rpx;
			margin-right: 12rpx;
		}
	}
	.groupList{
		padding: 0 32rpx 4rpx 32rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		.list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 96rpx;
			border-bottom: 1rpx solid #ededed;
			font-size: 24rpx;
			color: #333333;
			.tit{
				font-size: 26rpx;
			}
		}
		.list:last-child{
			border-bottom: 1rpx solid #FFFFFF;
		}
	}

}
.plsData{
	padding: 24rpx;
	background: white;
	border-radius: 8rpx;
}
.goods-box{
	// margin-top: 15rpx;
	padding-bottom: 1rpx;
	.goods{
		display: flex;
		margin-bottom: 30rpx;
		background: #ffffff;
		border-radius: 20rpx;
		// padding: 24rpx;
		position: relative;
		image{
			width: 188rpx;
			height: 188rpx;
			border-radius: 8rpx;
		}
		>view{
			flex: 1;
			// padding: 30rpx;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			margin-left: 20rpx;
		}
		.cuoClose{
			position: absolute;
			bottom: 20rpx;
			right: 0rpx;
			font-size: 32rpx;
			color: #999999;
			u-icon{
				position: relative;
				top: -4rpx;
				margin-right: 10rpx;
			}
		}
		.t1{
			display: flex;
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			color: #1D2129;
			line-height: 37rpx;
			width: 100%;
			white-space:nowrap; 
			overflow:hidden; 
			text-overflow:ellipsis;
			text{
				font-size: 20rpx;
				font-weight: 400;
				text-align: right;
				color: #999999;
				line-height: 28rpx;
			}
		}
		.tt{
			margin: 10rpx 0;
			view{
				display: inline-block;
				padding: 7rpx 12rpx;
				color: #E8C778;
				border: 1rpx solid #E8C778;
				font-size: 16rpx;
				margin-right: 20rpx;
			}
		}
		.t2{
			display: inline-block;
			padding: 5rpx 8rpx;
			border-radius: 6rpx;
			color: #E8BC88;
			font-size: 16rpx;
			text-align: center;
			background: linear-gradient(135deg, #2D3039 0%, #495057);
			margin-right: 15rpx;
			
			image{
				width: 16rpx;
				height: 16rpx;
				position: relative;
				top: 3rpx;
				margin-right: 10rpx;
			}
		}
		.price{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			text{
				font-size: 32rpx;
				font-weight: 400;
				color: #007664;
				text-align: right;
				line-height: 33rpx;
				letter-spacing: 1px;
				.text{
					font-size: 26rpx;
				}
			}
			.make{
				font-size: 24rpx;
				font-weight: 400;
				color: #007664;
				line-height: 33rpx;
				letter-spacing: 1px;
				margin-right: 18rpx;
			}
			.buy{
				width: 93rpx;
				height: 49rpx;
				background: #d5bc81;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				line-height: 49rpx;
				letter-spacing: 1px;
			}
		}
	}
	
}
	
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
